<template>
  <div>
    <!-- 元素 标签 分3种类型
    块元素： 占据整行，可以去修改width height   div p
    行内:  不占据整行  无法修改width height     span
    行内块: 不占据整行，可以修改 width height    img button input -->
    <!-- <div>这是div标签</div>
    <div>这是p标签</div>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button> -->

    <!-- 
      弹性盒子
      当你将一个元素 设置为 弹性盒子之后(display:flex)  内部元素 自动延主轴方向排列
      主轴默认是 X轴   侧轴默认是y轴
     -->

     <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
     </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="less">
.box{
  width: 1230px;
  height: 615px;
  border: 1px solid red;
  display: flex;
  justify-content: space-between ;  /**在主轴上的排列方式 */
  /*
    排列方式有: flex-start  默认 起始点对齐
                flex-end   终点对齐
                center     居中对齐
                space-between 两端对齐,中间间距平分
                space-around  两端间距和中间间距比例 1:2
                space-evenly  所有间距1:1
                
  */
  div{
    width: 234px;
    background: red;
  }
}

</style>